<script lang="ts" setup>
  import { Switch } from '@renderer/components/ui/switch'
  import { Label } from '@renderer/components/ui/label'
  import SavePathToggle from '@renderer/components/SavePathToggle.vue'
  import { useSettingsStore } from '@renderer/store/modules/settings.store'

  const settingsStore = useSettingsStore()
  // 主题选项
  const themes = [
    { id: 'dark', name: '深色', color: '#1e293b' },
    { id: 'purple', name: '紫色', color: '#581c87' },
    { id: 'blue', name: '蓝色', color: '#1e3a8a' },
    { id: 'green', name: '绿色', color: '#064e3b' }
  ]

  const settings = ref({
    theme: 'dark',
    autoSave: true
  })

  // 方法
  function setTheme(theme: string) {
    settings.value.theme = theme
    // 实际应用中，这里会应用主题到整个应用
  }

  // 保存路径选择
  const handlePathSelected = (path: string) => {
    settingsStore.setOutSavePath(path)
  }
</script>
<template>
  <section class="section p-6 text-app">
    <!-- 主题设置 -->
    <div class="setting-item mb-6">
      <div class="mb-2 flex items-center justify-between">
        <Label class="setting-item-label">主题</Label>
      </div>
      <div class="flex space-x-3">
        <button
          v-for="theme in themes"
          :key="theme.id"
          @click="setTheme(theme.id)"
          :class="[
            'theme-btn h-8 w-8 rounded-full flex items-center justify-center transition-transform hover:scale-110',
            {
              'ring-2 ring-white ring-offset-2 ring-offset-gray-800': settings.theme === theme.id
            }
          ]"
          :style="{ backgroundColor: theme.color }"
        >
          <i v-if="settings.theme === theme.id" class="i-fa6-solid-check text-white"></i>
        </button>
      </div>
    </div>

    <!-- 自动保存设置 -->
    <div class="setting-item mb-6">
      <div class="flex items-center justify-between">
        <Label class="setting-item-label">自动保存录制</Label>
        <Switch v-model="settings.autoSave" />
      </div>
      <p class="text-sm text-gray-500 mt-1">启用后，录制结束将自动保存文件</p>
    </div>

    <!-- 保存路径设置 -->
    <div class="setting-item mb-6">
      <Label class="setting-item-label">保存路径</Label>
      <SavePathToggle :saved-path="settingsStore.outSavePath" @path-selected="handlePathSelected" />
    </div>
  </section>
</template>

<style lang="scss" scoped>
  .setting-item {
    @apply w-full;

    &-label {
      @apply mb-2;
    }
  }
</style>
